<template>
  <PublicPage pageName="奖金中心" :borderType="true" :showNav="true">
    <view class="bonusCenter" @click="hideTips">
      <view class="pa32">
        <view class="topCardBox">
          <view @click="_quotaGo(prizeObj)">本期（第{{prizeObj.periods || 0}}期）奖金已累计<icon class="iconfont icon-arrow_right fz-12" style="display: inline-flex;" /></view>
          <view class="fz-24 fw6 u-p-t-32 u-p-b-32"><text class="fz-14">￥</text>{{prizeObj.totalBonus || 0}}</view>
          <view class="u-p-b-28">提现额度：￥{{prizeObj.receiveQuota || 0}}</view> 
          
          <view class="endTimeBox fz-12" v-if="endTimeObj.code == 201" >
              本期已结束，请刷新后领取奖金
          </view>
          <view class="endTimeBox fz-12" v-else>
            <text class="u-p-r-8" v-if="endTimeObj.day">{{endTimeObj.day}}天</text>
            <text>{{endTimeObj.hour}}</text>
            <text>:</text>
            <text>{{endTimeObj.minute}}</text>
            <text>:</text>
            <text>{{endTimeObj.second}}</text>
            <text>.</text>
              <u-count-to
              :start-val="9"
              :end-val="0" 
              :duration="1000" 
              :use-easing="false" 
              color="#ED6A0C" 
              font-size="24" 
              ref="countTo" 
              @end="_countToFn">
              </u-count-to>
            <text class="u-p-l-8">后可领：</text>
            <text class="fw6">¥{{prizeObj.canReceiveBonus || 0}}</text>
          </view>
        </view>
      </view>
      
      <view class="px32">
        <view class="fw6 linh-48">往期记录</view>
        <view v-if="!recordsList.length && isLoad" style="height: 600rpx;">
          <DefaultPage type="2" tips="暂无往期记录"></DefaultPage>
        </view>
        <view v-if="recordsList.length">
          <view v-for="(item,index) in recordsList" :key="index" class="forBox">
            <view class="linh-44 justify-between items-center px32" style="box-shadow: inset 0px -1px 0px #EBEDF0;">
              <view class="posre" @click.stop="tipsShowFn(index)">
                第{{item.periods}}期<icon class="iconfont icon-question u-m-l-6" style="transform: translateY(1px);"/>
                <view class="tipsBox" v-if="item.tipsShow">{{item.startTime}} - {{item.endTime}}</view>
              </view>
              <view class="btn1" v-if="item.receiveQuota && item.totalBonus && !item.actualBonus" @click="throttle(receive,1000,item)">领取奖金</view>
              <view class="btn2" v-if="item.receiveQuota && item.totalBonus && item.actualBonus">已领取</view>
            </view>
            <view class="u-p-t-32 u-p-b-32">
              <u-row gutter="16">
                <u-col span="4">
                  <view class="tc opc7">实发奖金</view>
                  <view class="tc u-p-t-8" :class="item.receiveQuota === 0 ? 'n5' : 'themeFontColor'">{{item.actualBonus}}元</view>
                </u-col>
                <u-col span="4">
                  <view class="tc opc7">领取额度</view>
                  <view class="tc u-p-t-8" :class="item.receiveQuota === 0 ? 'n5' : ''">{{item.receiveQuota === 0 ? '未达标' : item.receiveQuota+'元'}}</view>
                </u-col>
                <u-col span="4" @click="_quotaGo(item)">
                  <view class="tc opc7">奖金总额<icon class="iconfont icon-arrow_right fz-12" style="display: inline-flex;" /></view>
                  <view class="tc u-p-t-8" :class="item.receiveQuota === 0 ? 'n5' : ''">{{item.totalBonus}}元<icon v-if="!item.receiveQuota || !item.totalBonus" class="iconfont icon-lock fz-20" style="display: inline-flex;position: relative;top: 2rpx;" /></view>
                </u-col>
              </u-row>
            </view> 
          </view>
        </view>
      </view>
    </view>

  <Modal 
    :show="receiveShow"
    :maskCloseAble="true"
    title="领取成功" 
    content="奖金已领取到钱包，可前往钱包进行提现。" 
    :claceShow="false"
    configText="立即去提现"
    @close="receiveShow = false"
    @config="_configReceive" />
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import Modal from "@/components/modal/index.vue";
import mini from "@/api/mini.js";
import { currentTime,getRemainderTime } from "@/utils/formTime.js";

export default {
  components: {
    PublicPage,
    DefaultPage,
    Modal
  },
  data(){
    return {
      prizeObj: {},
      timer: null, // 定时器
      endTimeObj:{
        day: 0,
        hour: "00",
        minute: "00",
        second: "00"
      },
      getParams: {
        currentPage: 1,
        pageSize: 100
      },
      isLoad: false, // 是否初次加载完成
      recordsList: [],


      tipsShow: false,
      receiveShow: false, // 领取奖金弹窗
    }
  },
  onLoad(){
    if (this.timer) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.timer); 
    }
  },
  onShow(){
    this.getCardInfo()
    this.getPreviousRecords()
  },
  methods:{
    currentTime, // 获取当前时间
    getRemainderTime, // 计算两个时间的时间差
    _countToFn(){
      this.$refs.countTo.start()
    },
    // 获取头部卡片信息
    getCardInfo(){
      mini.getBonusCenterCardInfo().then(res=>{
        this.prizeObj = res.data

        this.endTimeObj = this.getRemainderTime(this.currentTime(),this.prizeObj.endTime)
        this.timer = setInterval(() => {
          this.endTimeObj = this.getRemainderTime(this.currentTime(),this.prizeObj.endTime)
        }, 1000);
      })
    },
    // 获取往期记录
    getPreviousRecords(){
      mini.getPreviousRecords(this.getParams).then(res=>{
        this.recordsList = []
        res.data.records.forEach(v=>{
          this.$set(v,'tipsShow',false)
          let startTime = new Date(v.startTime.replace(/-/g, "/"))
          v.startTime = `${startTime.getFullYear()}/${startTime.getMonth() + 1}/${startTime.getDate()}`
          let endTime = new Date(v.endTime.replace(/-/g, "/"))
          v.endTime = `${endTime.getFullYear()}/${endTime.getMonth() + 1}/${endTime.getDate()}`
          this.recordsList.push(v)
        })
        this.isLoad = true
      })
    },
    // 领取奖金 
    receive(item){
      mini.receiveBonus({periods: item.periods}).then(res=>{
        this.receiveShow = true
        this.getPreviousRecords()
      })
    },
    // 立即去提现
    _configReceive(){
      this.receiveShow = false
      this.navigateTo({url: '/pagesA/wallet/wallet'});
    },
    tipsShowFn(index){
      this.recordsList.forEach((v,i)=>{
        if(i === index){
          v.tipsShow = true
        }else{
          v.tipsShow = false
        }
      })
    },
    hideTips(){
      this.recordsList.forEach((v,i)=>{
          v.tipsShow = false
      })
    },
    _quotaGo(item){
      this.navigateTo({url: `/pagesB/advertiseChild/bonusDetails?periods=${item.periods}&startTime=${item.startTime || item.currentTime}&endTime=${item.endTime}&totalBonus=${item.totalBonus}`})
    }
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer); 
    }
  },
}
</script>
<style lang="scss" scoped>
.bonusCenter{
  height: 100%;
  overflow-y: auto;
  .pa32{
    padding: 32rpx;
  }
  .n5{
    color: #C8C9CC;
  }
  .opc7{
    opacity: 0.7;
  }
  .topCardBox{
    background: linear-gradient(90deg, #E44435 0%, #F95D4F 100%);
    box-shadow: 0px 8rpx 24rpx rgba(228, 69, 54, 0.3);
    border-radius: 24rpx;
    height: 388rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFF;
    .endTimeBox{
      background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
      border-radius: 8rpx;
      padding: 8rpx 32rpx;
      color: #ED6A0C;
      position: relative;
      display: flex;
      &::before{
        display: block;
        content: ' ';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -12rpx;
        width: 0;
        height: 0;
        border-left: 6rpx solid transparent;
        border-right: 6rpx solid transparent;
        border-bottom: 12rpx solid #FEDFA6;
      }
    }
  }
  .forBox{
    background-color: #FFF;
    border-radius: 16rpx;
    .btn1,.btn2{
      width: 128rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background-color: #E44435;
      color: #FFF;
      border-radius: 32rpx;
      font-size: 24rpx;
      display: inline-block;
    }
    .btn2{
      color: #DCDEE0;
      background: #F2F3F5;
    }
    .posre{
      position: relative;
      .tipsBox{
        position: absolute;
        top: -60rpx;
        left: 50rpx;
        height: 68rpx;
        line-height: 68rpx;
        padding: 0 28rpx;
        color: #FFF;
        background: #323233;
        border-radius: 16rpx;
        white-space:nowrap;
        &::before{
          display: block;
          content: ' ';
          position: absolute;
          left: 44rpx;
          transform: translateX(-50%);
          bottom: -10rpx;
          width: 0;
          height: 0;
          border-left: 6rpx solid transparent;
          border-right: 6rpx solid transparent;
          border-top: 12rpx solid #323233;
        }
      }
    }
  }
  .forBox+.forBox{
    margin-top: 24rpx;
  }
}
</style>